<template>
	<div class="user-info" v-show="showModal">
		<view class="center-box">
			<view class="top">
				<view class="top-title">
					用户信息
				</view>
				<view class="top-close" @click="closeModal">
					<view class="iconfont icon-close"></view>
				</view>
			</view>
			<view class="list">
				<view class="avatar">
					<image :src="avatarUrl||authorAvatar" mode=""></image>
				</view>
				<view class="user-name">
					{{nickName|| 'User'}}
				</view>
			</view>
			<view class="btns">
				<view class="clear-info" @click="clearInfo">
					<navigator open-type="exit" target="miniProgram">清空信息</navigator>
				</view>
				<view class="update-info" @click="updateInfo">
					更新信息
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import authorAvatar from '../static/authorAvatar.jpg'
	export default {
		name: 'user-info',
		data() {
			return {
				showModal: false,
				authorAvatar,
				nickName: '',
				avatarUrl: ''
			}
		},
		watch: {
			showModal: {
				handler(newVal, oldVal) {
					if (newVal) {
						let nickName = uni.getStorageSync('nickName')
						let avatarUrl = uni.getStorageSync('avatarUrl')
						if (nickName) {
							this.nickName = nickName
						}
						if (avatarUrl) {
							this.avatarUrl = avatarUrl
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			closeModal() {
				this.showModal = false
			},
			clearInfo() {
				uni.clearStorage();
			},
			updateInfo() {
				// #ifdef MP
				let that = this
				uni.getUserProfile({
					desc: "weixin", // 指明用途,这个参数是必须的
					success: function(res) {
						let nickName = res.userInfo.nickName
						let avatarUrl = res.userInfo.avatarUrl

						uni.login({
							success(res) {
								console.log(res);
								if (res.code) {
									uniCloud.callFunction({
										name: "commonUtils",
										data: {
											actionType: 'openid',
											code: res.code
										}

									}).then(res => {
										console.log("openid", res)
										if (res.result?.data?.openid) {
											uni.setStorageSync('openid', res.result.data
												.openid)
											uni.setStorageSync('nickName', nickName);
											uni.setStorageSync('avatarUrl', avatarUrl)
											that.nickName = nickName
											that.avatarUrl = avatarUrl
											that.$emit('updateInfo')
											that.showModal = false
										} else {
											uni.showToast({
												title: '获取失败，请重试',
												icon: 'error'
											})
										}
									})
								} else {
									uni.showToast({
										title: '获取失败，请重试',
										icon: 'error'
									})
								}
							}
						})
					}
				})
				// #endif  
			},
		}
	}
</script>

<style scoped lang='scss'>
	.user-info {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.center-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 75%;
			padding: 32rpx;
			border-radius: 20rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			-webkit-animation: zoom_move_4 1s;

			.top {
				display: flex;
				justify-content: space-between;

				.top-title {
					font-size: 36rpx;
				}

				.top-close {
					font-size: 36rpx;
				}
			}

			.list {
				margin-top: 30rpx;
				width: 100%;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					box-shadow: 0 0 30px 0 rgba(4, 29, 58, 0.10);
					margin: 0 auto;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-name {
					text-align: center;
					margin-top: 10rpx;
				}
			}

			.btns {
				display: flex;
				margin-top: 30rpx;

				.clear-info,
				.update-info {
					flex: 1;
					height: 100rpx;
					border-radius: 50rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 26rpx;
				}

				.clear-info {
					background: #efefef;
					color: #050505;
				}

				.update-info {
					color: #fff;
					background: #ffc109;
					margin-left: 30rpx;
				}
			}

		}
	}

	@-webkit-keyframes zoom_move_4 {
		0% {
			opacity: 0;
		}

		60% {
			opacity: 1;
		}
	}
</style>
